@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@tailwind utilities;
@tailwind components;
@tailwind base;

#opencopilot-aicopilot {
  isolation: isolate;
  --opencopilot-primary-clr: #703ea8;
  --opencopilot-accent-clr: #f8f7f8;
  --opencopilot-accnet-2-clr: #817f81;
  --opencopilot-primary-light-clr: rgba(0, 87, 255, 0.1);
}
@layer base {
  svg {
    width: 1em;
    height: 1em;
  }
}
@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-bottom {
  animation: fade-in-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.flex-center {
  @apply opencopilot-flex opencopilot-items-center opencopilot-justify-center;
}

@keyframes fade-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-top {
  animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

em-emoji-picker {
  --background-rgb: 85, 170, 255;
  --border-radius: 10px;
  --category-icon-size: 24px;
  --font-family: inherit;
  --font-size: 14px;
  min-height: 250px;
  max-height: 300px;
}

.PopoverContent {
  transform-origin: var(--radix-popover-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.PopoverContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.PopoverContent[data-side="top"] {
  animation-name: slideUp;
}

.PopoverContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in-right {
  animation: fade-in-right 0.6s both;
}

@keyframes scale-out-br {
  0% {
    transform: scale(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }

  100% {
    transform: scale(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

.scale-out-br {
  animation: scale-out-br 0.5s ease-in-out forwards;
}
